<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    float: left;
    margin-left: 200px;
    margin-top: 100px;
    width: 800px;
    height: 500px;
    border-left: 1px solid red;
    border-bottom: 1px solid red;
  }

  .box span {
    float: left;
    width: 40px;
    height: 100px;
    margin-left: 20px;
    display: inline-block;
    background-color: pink;
  }

  .box span p {
    float: left;
    display: inline-block;
    width: 40px;
    height: 20px;
    text-align: center;
  }

  s {
    text-decoration: none;
    font-size: 12px;
    text-align: center;
  }
</style>

<body>
  <script>
    let a = prompt('请输入第一季度量')
    let b = prompt('请输入第二季度量')
    let c = prompt('请输入第三季度量')
    let d = prompt('请输入第四季度量')
    document.write(`
    <div class='box'>
<s>第一季度</s><span style="height: ${a}px;"><p>${a}</p></span>
<span style="height: ${b}px;"><p>${b}</p></span>
<span style="height: ${c}px;"><p>${c}</p></span>
<span style="height: ${d}px;"><p>${d}</p></span>
      </div>
    `)
  </script>
</body>

</html>